<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>   
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/chain/ctp.action.chain.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>		
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/label.css" rel="stylesheet" type="text/css"/>
		
		<script type='text/javascript' kind='variant'>		  
		     //================================UI变量定义片段=========================================================
             var combobox1;//联动下拉列表源
             var combobox2;//被联动的combobox 
             var chain1;//关联链  
             var showLayout;//展示区布局器  
             var showGroupbox;//展示区groupbox
             var buttonsLayout;//测试区布局器
             var buttonsGroupbox;//测试区groupbox
             var testPanel;//测试界面面板                      
        </script>
        <script>
        	//================================UI组件定义片段============================================================
            // ctp.core.log.lvl=ctp.core.loglvl.info;            
            $(document).ready(function(){ 
			    combobox2 = new ctp.ui.combobox({
                    id: 'combobox2',
					items: [{
                        text: '未关联前选项1',
                        value: '1'
                    }, {
                        text: '未关联前选项2',
                        value: '0'
                    }],
                    width: '100%'                 
                });//被联动的combobox  
                
			    chain1=new ctp.action.chain({id:'chain1',target:combobox2,url:'data.json'}); //创建关联链 
			               
                combobox1 = new ctp.ui.combobox({
                    id: 'combobox1',
                    width: '100%',  
					chainTarget:[chain1],                
                    items: [{
                        text: '男',
                        value: '1'
                    }, {
                        text: '女',
                        value: '0'
                    }]
                });//联动下拉列表源                   
                	
                showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '100%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
                    defaults: {
                        display: 'h',
                        align: 'center',
                        label: {
                            width: '100px'
                        }
                    },
                    items: [[{
                        label: {
                            text: '联动下拉列表源：'
                        },
                        element: combobox1
                    }, {
                        label: {
                            text: '被联动下拉列表：'
                        },
                        element: combobox2
                    }]]
                
                }); 
				showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					    [{label: {text: '无'},colspan: 3}]					
					]
                
                }); 
				buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				testPanel=new ctp.ui.panel({
                    title: 'ctp.action.chain实例',
                    collapsible: true,
                    width: '700px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });            
            });
        </script>
    </head>
    <BODY>
        <b>ctp.action.chain实例</b>
        <hr/>
        <br/>  
    </BODY>
</html>